<template>
  <el-container class="eid-management-container">
    <el-card class="eid-management-card">
      <h2>文章管理</h2>
      <el-button type="primary" @click="showDialog = true">新增</el-button>
      <el-table :data="list" style="width: 100%; margin-top: 20px">
        <el-table-column
          prop="title"
          label="标题"
          width="180"
        ></el-table-column>
        <el-table-column
          prop="username"
          label="作者"
          width="180"
        ></el-table-column>
        <el-table-column prop="content" label="pdf">
          <template #default="scope">
            <div
              style="color: blue; cursor: pointer"
              @click="downloadPdfFromBase64(scope.row.content)"
            >
              点击下载
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="img" label="图片" width="180">
          <template #default="scope">
            <el-image
              width="50px"
              height="50px"
              :src="scope.row.img"
            ></el-image>
          </template>
        </el-table-column>
        <el-table-column prop="status" label="状态">
          <template #default="scope">
            {{ status.find((i) => i.value === scope.row.status).label }}
          </template>
        </el-table-column>

        <el-table-column label="操作">
          <template #default="scope">
            <el-button type="text" @click="viewDetails(scope.row)"
              >修改</el-button
            >
            <el-button @click="del(scope.row)" type="text">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        class="pagination"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pager.page"
        :page-sizes="[10, 20, 30, 40]"
        :page-size="pager.limit"
        layout="total, sizes, prev, pager, next, jumper"
        :total="list.length"
      />
    </el-card>
    <el-dialog
      v-if="showDialog"
      title="增加/修改"
      v-model="showDialog"
      @close="cancel"
    >
      <el-form :model="selectedModel" label-width="120px">
        <el-form-item label="标题" prop="title">
          <el-input v-model="selectedModel.title"></el-input>
        </el-form-item>
        <el-form-item label="内容" prop="content">
          <upload v-model="selectedModel.content" />
        </el-form-item>
        <el-form-item label="封面" prop="img">
          <upload v-model="selectedModel.img" />
        </el-form-item>
        <el-form-item label="状态" prop="status">
          <el-select v-model="selectedModel.status">
            <el-option
              v-for="item in status"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancel">取消</el-button>
        <el-button type="primary" @click="submit">提交申请</el-button>
      </div>
    </el-dialog>
  </el-container>
</template>

<script setup>
import { ref, reactive } from "vue";
import { downloadPdfFromBase64 } from "@/utils/pdf";
import * as api from "@/api/article.js";
import { useStore } from "vuex";
import { ElMessage } from "element-plus";
import upload from "@/components/upload";
const store = useStore();
const status = [
  {
    value: "pending",
    label: "待审批",
  },
  {
    value: "approved",
    label: "已通过",
  },
  {
    value: "rejected",
    label: "已拒绝",
  },
];
const showDialog = ref(false);
const selectedModel = ref({});
const list = ref([]);
const open = () => {
  showDialog.value = true;
};
const viewDetails = (item) => {
  selectedModel.value = { ...item };
  open();
  // 实现查看申请详情的逻辑
};
const cancel = () => {
  showDialog.value = false;
  selectedModel.value = {};
};
const submit = async () => {
  const fn = selectedModel.value.id ? api.update : api.create;
  const { userInfo } = store.state;
  const res = await fn({
    ...selectedModel.value,
    username: userInfo.username,
    user_id: userInfo.id,
  });
  if (res) {
    cancel();
    ElMessage.success(res.message);
    await getList();
  }
};

const pager = ref({
  page: 1,
  limit: 10,
});
const handleSizeChange = (newSize) => {
  pager.limit.value = newSize;
  pager.page.value = 1; // Reset to first page on size change
  getList();
};

const handleCurrentChange = (newPage) => {
  pager.page.value = newPage; // Reset to first page on size change
  getList();
};
const getList = async () => {
  const { data, limit, page } = await api.getList({
    ...pager.value,
    params: {},
  });
  pager.value = {
    pageNum: page,
    pageSize: limit,
  };
  list.value = data;
};
const del = async ({ id }) => {
  await api.del({ id });
  await getList();
};
getList();
</script>

<style scoped>
.eid-management-container {
  padding: 30px;
}

.eid-management-card {
  width: 100%;
}

h2 {
  margin-bottom: 20px;
}

.dialog-footer {
  text-align: right;
}
</style>